<template>
    <el-row :gutter="20">
        <el-col :span="4">
            <div class="grid-content ep-bg-purple" /><el-button type="primary"
                @click="show_askleave_dialog">申请假条</el-button>
        </el-col>
        <el-col :span="4">
            <div class="grid-content ep-bg-purple" /><el-button @click="get_my_leave" type="success">刷新假条状态</el-button>
        </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%; ">
        <el-table-column prop="ask_time" label="申请时间" width="180" />
        <el-table-column prop="start_time" label="开始时间" width="180" />
        <el-table-column prop="end_time" label="结束时间" width="180" />
        <el-table-column prop="description" label="请假原因" width="180" />
        <el-table-column label="状态" width="100">
            <template #default="scope">
                <el-tag v-if="scope.row.status == '审核中'" type="info">审核中</el-tag>
                <el-tag v-if="scope.row.status == '已通过'" type="success">已通过</el-tag>
                <el-tag v-if="scope.row.status == '未通过'" type="danger">未通过</el-tag>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="填写假条信息" width="700" :before-close="handleClose">
        <el-form :model="leave_form" label-width="auto" style="max-width: 600px">
            <el-form-item label="请假类型">
                <el-select v-model="leave_form.reason_type" placeholder="选择请假原因">
                    <el-option v-for="i in reason_list" :label="i.name" :value="i.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="请假原因">
                <el-input v-model="leave_form.description" type="textarea" />
            </el-form-item>
            <el-form-item label="时间">
                <el-col :span="11">
                    <el-date-picker v-model="leave_form.start_time" type="datetime" placeholder="开始时间"
                        format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
                </el-col>
                <el-col :span="2" class="text-center">
                    <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="11">
                    <el-date-picker v-model="leave_form.end_time" type="datetime" placeholder="结束时间"
                        format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
                </el-col>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit_leave">
                    点击提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import formatTime from '../../utils/formattime.js'
import { ref, onMounted } from "vue"
import axios from '../../utils/http.js'
import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'
let leave_result = ref('审核结果')
let tableData = ref([])
let now_status = ref(1)
let dialogVisible = ref(false)
let reason_list = ref([])
const show_askleave_dialog = () => {
    dialogVisible.value = true
}
let leave_form = ref({
    reason_type: '',
    description: '',
    start_time: '',
    end_time: '',

})

const handleClose = (done) => {
    ElMessageBox.confirm('确认关闭？')
        .then(() => {
            done()
        })
        .catch(() => {
        })
}
function submit_leave() {
    axios({
        url: 'leave/teacher_leave/',
        method: 'post',
        params: {
            username: localStorage.getItem('username')
        },
        data: leave_form.value
    }).then(res => {
        if (res.data.code == 201) {
            ElMessage({
                message: '提交成功',
                type: 'success',
            })

        }
        else {
            ElMessage({
                message: res.data.msg,
                type: 'error',
            })
        }
        dialogVisible.value = false
        get_my_leave()
        
    })
}

function get_reasonlist() {
    axios({
        url: 'leave/get_reason_type/',
        method: 'get',
        params: {
            username: localStorage.getItem('username')
        }
    }).then(res => {
        reason_list.value = res.data.reason_list
    })
}

function get_my_leave() {
    axios({
        url: 'leave/get_my_leave/',
        method: 'get',
        params: {
            username: localStorage.getItem('username')
        }
    }).then(res => {
        tableData.value = res.data.leave_list
        for (var i = 0; i < tableData.value.length; i++) {
            tableData.value[i].ask_time = formatTime(tableData.value[i].ask_time)
            tableData.value[i].start_time = formatTime(tableData.value[i].start_time)
            tableData.value[i].end_time = formatTime(tableData.value[i].end_time)
        }
    })
}

onMounted(() => {
    get_reasonlist()
    get_my_leave()
})

</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
</style>